import { ColumnDef } from '@tanstack/react-table';
import { IndeterminateCheckbox } from './indeterminate-checkbox'
import { TreeItem } from './schema'
import {
    TriangleDownIcon,
    TriangleRightIcon
} from '@radix-ui/react-icons'
export const columns: ColumnDef<TreeItem>[] = [
    {
        accessorKey: 'name',
        cell: ({ row, getValue }) => (
            <div
                style={{
                    paddingLeft: `${row.depth}rem`,
                }}
            >
                <div className='flex items-center'>
                    <IndeterminateCheckbox
                        {...{
                            checked: row.getIsSelected(),
                            indeterminate: row.getIsSomeSelected(),
                            onChange: row.getToggleSelectedHandler(),
                        }}
                    />{' '}
                    {row.getCanExpand() && (
                        <button
                            {...{
                                onClick: row.getToggleExpandedHandler(),
                                style: { cursor: 'pointer' },
                            }}
                        >
                            {row.getIsExpanded() ? <TriangleDownIcon /> : <TriangleRightIcon />}
                        </button>
                    )}{' '}
                    {getValue<boolean>()}
                </div>
            </div>
        ),
        footer: props => props.column.id,
    },

]

